<template>
  <div class="container">
    <div ref="chart_ref" class="chart"></div>
  </div>
</template>

<script>
export default {
  name:"HurstChart",
  data() {
    return {
      chart: null,
      HurstName: [
        "持续退化",
        "由退化到改善",
        "不显著变化",
        "持续改善",
        "由改善到退化",
      ],
      upHurstData: [0.05, 0.04, 0.57, 0.23, 0.11],
      middleHurstData: [0.05, 0.04, 0.52, 0.26, 0.13],
      downHurstData: [0.02, 0.03, 0.41, 0.4, 0.14],
      allHurstData: [0.04, 0.04, 0.52, 0.28, 0.12],
      areaName: ["赣江上游", "赣江中游", "赣江下游", "全流域"],
    };
  },
  mounted() {
    this.HurstChartInit()
    //当窗体的尺寸发生改变时，图表大小也随之改变
    window.addEventListener("resize", this.screenAdapter);
  },
  beforeDestroy() {
    //  销毁图表实例
      if(this.chart){
        this.chart.dispose()
        this.chart=null
      }
    //组件销毁时移除事件
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    HurstChartInit() {
      //初始化图表
      this.chart = this.$echarts.init(this.$refs.chart_ref, "dark");
      const option = {
        backgroundColor: "rgba(0, 0, 0, 0)",
        color: ["#FDC5F5", "#F45B69", "#F7A072", "#B5EAD7", "#06D6A0"],
        //高亮显示
        tooltip: {
          //触发条件，鼠标移入坐标轴
          trigger: "item",
          //高亮类型
          axisPointer: {
            //线条
            type: "line",
            z: 0,
            lineStyle: {
              type: "solid",
              color: "#2D3443",
            },
          },
          backgroundColor: "rgba(16,12,42,0.9)",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          data: this.areaName,
          bottom: "2%",
          itemGap: 10,
        },
        radar: {
          radius: "75%",
          center: ["50%", "45%"],
          startAngle: 45,
          name: {
            textStyle: {
              color: "#1883ff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: true,
            symbol: "arrow",
            symbolSize: [5, 7.5],
            lineStyle: {
              color: "#1883ff",
              type: "dashed",
            },
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          indicator: [
            { name: "持续退化", max: 0.2 },
            { name: "由退化到改善", max: 0.2 },
            { name: "不显著变化", max: 0.6 },
            { name: "持续改善", max: 0.6 },
            { name: "由改善到退化", max: 0.2 },
          ],
        },
        series: [
          {
            name: "占比",
            type: "radar",
            areaStyle: {},
            symbol: "none",
            itemStyle: {
              normal: {
                areaStyle: {
                  type: "default",
                },
              },
            },
            lineStyle: {
              opacity: 0,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            data: [
              {
                value: this.upHurstData,
                name: "赣江上游",
              },
              {
                value: this.middleHurstData,
                name: "赣江中游",
              },
              {
                value: this.downHurstData,
                name: "赣江下游",
              },
              {
                value: this.allHurstData,
                name: "全流域",
              },
            ],
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.chart {
  width: 100%;
  flex: 0.9;
}
</style>